<template>
  <div class="AdvLink">
    <el-card>
      <el-tabs v-model="activeName" @tab-click="tagClick">
        <el-tab-pane label="文字链接" name="1">
          <!-- 列表 -->
          <el-table :data="textData" border style="width: 100%" class="advLink">
            <el-table-column fixed label="#" width="80px" type="index" :index="indexMethod" />
            <el-table-column fixed prop="title" label="标题" />
            <el-table-column prop="des" label="链接描述" />
            <el-table-column prop="type" label="链接类型">
              <template #default="{ row }">
                <div class="textType type">
                  {{ handleType(row.type) }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="url" label="链接地址" />
            <el-table-column fixed="right" label="操作">
              <template #default="{ row }">
                <el-button icon="el-icon-edit" type="primary" size="small" @click="editTextLink(row.id)" />
                <el-button icon="el-icon-delete" type="danger" size="small" @click="delTextLink(row.id)" />
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="图片链接" name="2">
          <!-- 列表 -->
          <el-table :data="textData" border style="width: 100%" class="advLink">
            <el-table-column fixed label="#" width="80px" type="index" :index="indexMethod" />
            <el-table-column fixed prop="des" label="链接描述" />
            <el-table-column prop="img" label="链接图片">
              <template #default="{ row }">
                <img :src="'http://124.223.14.236:8060/' + row.img" alt="" style="width:120px">
              </template>
            </el-table-column>
            <el-table-column label="链接类型">
              <template #default="{ row }">
                <div class="imgType type">
                  {{ handleType(row.type) }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="url" label="链接地址" />
            <el-table-column fixed="right" label="操作">
              <template #default="{ row }">
                <el-button icon="el-icon-edit" type="primary" size="small" @click="editTextLink(row.id)" />
                <el-button icon="el-icon-delete" type="danger" size="small" @click="delTextLink(row.id)" />
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
      <el-button size="small" type="primary" class="add" icon="el-icon-plus" @click="openDialog">新增</el-button>
      <!-- 分页器 -->
      <el-pagination
        :current-page="queryData.page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="queryData.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
    <!-- 弹框 -->
    <advlink-dialog ref="advlinkDialog" @updata="initData" />
  </div>
</template>
<script>
import AdvlinkDialog from './components/AdvlinkDialog.vue'
import { getAdvLinkListApi, delAdvLinkApi } from '@/api/adv/link'
export default {
  name: 'AdvLink',
  components: {
    AdvlinkDialog
  },
  data() {
    return {
      // 文字类型渲染数据
      textData: [],
      // 请求参数
      queryData: {
        page: 1,
        limit: 10
      },
      // 总数
      total: null,
      activeName: '1'
    }
  },
  created() {
    this.initData()
  },
  methods: {
    // todo 文字链接数据初始化
    async initData() {
      const { data: res } = await getAdvLinkListApi({ ...this.queryData, type: +this.activeName })
      this.total = res.count
      this.textData = res.data
    },
    // 选中时触发的tags
    tagClick() {
      this.initData()
    },
    // 处列表理序号
    indexMethod(index) {
      return (this.queryData.page - 1) * this.queryData.limit + index + 1
    },
    // 分页器 => 每页显示条数
    handleSizeChange(val) {
      this.queryData.limit = val
      this.queryData.page = 1
      this.initData()
    },
    // 分页器 => 当前页
    handleCurrentChange(val) {
      this.queryData.page = val
      this.initData()
    },
    // 删除
    async delTextLink(id) {
      try {
        await this.$confirm('确定删除吗？', '提示')
      } catch (error) {
        return this.$message('已取消')
      }
      if (this.textData.length === 1 && this.queryData.page > 1) {
        this.queryData.page--
      }
      await delAdvLinkApi(id)
      this.$message.success('删除成功')
      this.initData()
    },
    // 新增打开弹框
    openDialog() {
      this.$refs.advlinkDialog.showDialog = true
    },
    handleType(type) {
      if (type === '1') {
        return '文字类型'
      }
      if (type === '2') {
        return '图片类型'
      }
    },
    // 文字链接回显
    editTextLink(id) {
      this.$refs.advlinkDialog.getAdvlinkDetail(id)
    }
  }
}
</script>
<style lang="scss" scoped>
.AdvLink {
  padding: 20px 20px 0 20px;
  .add {
    position: absolute;
    right:40px;
    top:40px;
  }
  .advLink {
    .el-button {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      padding: 0 ;
    }
  }
  .type{
    width: 70px;
    height: 32px;
    padding: 0 10px;
    line-height: 30px;
    font-size: 12px;
    border-width: 1px;
    border-style: solid;
    border-radius: 4px;
    box-sizing: border-box;
    white-space: nowrap;
  }
  .textType {
    background-color: #ecf5ff;
    border-color: #d9ecff;
    color: #409EFF
  }
  .imgType {
    background-color: #f0f9eb;
    border-color: #e1f3d8;
    color: #67c23a;
  }
}

</style>
